<template>
    <div class="flex_col m5 p10 card2">
        <label style="align-self: center;">IO调试</label>
        <div class="flex_row_center mt5">
            <el-select style="width: 100px;" v-model="ctx.port">
                <el-option v-for="(item, index) in PORTS" :key="index" :label="item" :value="item"/>
            </el-select>
            <el-select class="ml5" style="width: 100px;" v-model="ctx.pin">
                <el-option v-for="(item, index) in PINS" :key="index" :label="item" :value="item">
                </el-option>
            </el-select>
            <el-select class="ml5" style="width: 100px;" v-model="ctx.level">
                <el-option v-for="(item, index) in LEVELS" :key="index" :label="item" :value="item">
                </el-option>
            </el-select>
        </div>
        <div class="flex_row_center mt5" style="justify-content: center;">
            <el-button @click="onClickCtrl" type="primary">控制</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { runAction } from '../utils/ui';
import { service } from '../service/service';


const PORTS = [
    'GPIOA', 'GPIOB', 'GPIOC', 'GPIOD', 'GPIOE'
];

const PINS = [
    '0', '1', '2', '3',
    '4', '5', '6', '7',
    '8', '9', '10', '11',
    '12', '13', '14', '15',
];

const LEVELS = [
    '低电平',
    '高电平'
]

interface Ctx {
    port: string,
    pin: string,
    level: string,
}

const ctx = reactive<Ctx>({
    port: PORTS[0],
    pin: PINS[0],
    level: LEVELS[0],
});

async function onClickCtrl() {
    runAction('IO', '控制', async () => {
        const port = PORTS.indexOf(ctx.port);
        const pin = PINS.indexOf(ctx.pin);
        const level = LEVELS.indexOf(ctx.level);
        await service.debugIoCtrl(port, pin, level);
    });
}

</script>
